<template>
  <div class="white">
    <div
      :style="{ height: config.height + 'px' }"
      v-if="!config.frameType"
    ></div>
    <div v-else :class="{ hasPadding: config.hasPadding }">
      <hr
        class="line-item"
        :style="{ borderTop: `1px ${config.lineType} ${config.color}` }"
      />
    </div>
  </div>
</template>

<script>
export default {
  props: ['value'],
  data() {
    return {
      config: this.value ? this.value : {}
    }
  },
  watch: {
    value(newVal) {
      this.config = newVal
    }
  },
  methods: {
    jump() {
      this.$router.push(this.config.link)
    }
  }
}
</script>

<style lang="less">
.white {
  overflow: hidden;
  .hasPadding {
    padding: 0 15px;
  }
}
</style>
